Khanh Nguyen

Khanh Nguyen

Netlify for deploying & hosting my website

Tools

Background

I recently chose to build this website that you’re currently reading using Hugo, a static site generator written in Go. This meant that I had static site files without a place to host them. I’ve managed my own VM with NGINX. I’ve also used serverless options like GitHub Pages, Firebase Hosting, App Engine, etc.

I know “serverless” doesn’t technically exist. It just means that the server is someone else’s problem. I wanted my website servers to be someone else’s problem, so I chose Netlify because it’s a platform that everyone raves about and I’ve never had a chance to try it myself.

If you’re not familiar with Netlify, it’s a platform that lets developers deploy and host websites without their own managing servers. It’s typically integrated with the developers’ Git workflows as part of their Continuous Integration and Continuous Delivery (also known as CICD) pipeline so that as changes are made to their code, Netlify automatically builds and deploys the most up to date website.

Besides, I’m always a big believer in diversifying skillsets so between that and FOMO, I gave it a shot!

Experience

Setup

It seems like college Khanh probably wanted to deploy a side project to Netlify at some point and got sidetracked, because I already had an account without any deployments configured. I logged in and connected to my GitHub account. Once that was all set up, I added my website repo.

Netlify configure GitHub repo

When the repo was connected, I specified hugo for build command and public as the publish directory. This step is important! Without these two, Netlify wont know how to build the site or where to find the site files. (Ask me how I know…)

Site build command and publish directory

Finally, specify my HUGO_VERSION environment variable so that Netlify knows which Hugo version to use:

Configure Hugo version

And voila! Netlify now automatically builds and deploys my Hugo site whenever I push a change the GitHub repo. There’s also a button that lets me manually trigger a deploy, but I haven’t needed to use that much except for troubleshooting.

User Interface

I’m a fan of the Netlify user interface (UI). It’s clean and feels developer friendly. I’ve been able to find whatever I needed in a few clicks. I like how everything related to my website is self contained in the khanh.dev project without feeling too crowded. Need to view the deploy logs? It’s there. Need to change the environment variable? There too. Configure the domain name? You betcha.

Netlify Project

I can’t even speak to their documentation because everything in the UI felt so intuitive, I only referenced the docs once or twice.

It’s always the cache

I did run into one little bump. I wanted to tweak my Hugo site theme so I ended up forking the original theme repo. This meant that I would need to replace the original theme submodule with my forked version. This resulted in an error with the build, similar to this one . I thought it was an issue with leftover git artifacts from the previous submodule so I removed the submodule, cleaned everything up, and added back my forked submodule. Some troubleshooting later (see the failed deploys in the earlier screenshot…) I learned that Netlify has a cache. I cleared the cache, kicked off a new build, and everything ran smoothly again.

So… Remember to clear your cache, folks!

Netlify Clear Cache

Cache Meme

Configuring a custom domain name

Using a custom domain with Netlify is the same process as with any other site. I logged into my domain registrar, added two records for khanh.dev to point them at Netlify’s servers, and things were up and running in a few hours. Just don’t make the mistake I did, make sure to put the @ for your Alias host field 🙃

Summary

I’ve always enjoyed the serverless experience, regardless of the platform, simply because… I’ll admit it… that I means I don’t have to set up or maintain my own web server.

I have so many friends who love doing that stuff. I’ve hosted my own web server and it was a great learning experience. So even though I have the skills to manage my own infrastructure, it’s not where I find joy. At the end of the day, my favorite part of working on a project involves pushing code and seeing ideas come to life.

All of that is to say, my first experience building with Netlify has been a positive one! It takes what could be a complicated deploy process and simplifies it so much that I don’t even have to think about it when I’m adding new content to my website. All I have to do is write my blog posts and remember to push my commits to GitHub. Ain’t that the life?

Netlify’s automation paired with their great UI results in a wonderful developer experience. I’m excited to continue using the platform for deploying and hosting my website, but to also discover all of the other features it has to offer!